<template>
  <div>
    <!-- 新增弹出框 -->
    <el-dialog :title="titlecopy" id="achieve_dialog-seven" append-to-body :visible.sync="show"
               @open="open">
      <el-form class="popup-one" ref="form" :rules="rules" :model="form" @submit.native.prevent>
        <el-form-item label="图号:" prop="imageCode">
          <el-input :disabled="!onedata?.imagecodeused" v-model="form.imageCode" @keyup.native="keyUp"
                    placeholder="请输入图号"></el-input>
        </el-form-item>
        <el-form-item label="产线:" prop="plName">
          <el-input :disabled="!onedata?.otheroperate" v-model="form.plName" @keyup.native="keyUp"
                    placeholder="请输入产线"></el-input>
        </el-form-item>
        <el-form-item label="单根工时（分）:" prop="workingHour">
          <el-input-number :disabled="!onedata?.otheroperate"
                           v-model="form.workingHour" @keyup.native="keyUp"
                           @change="handleChange"
                           controls-position="right"
                           :min="0.1" :max="60" style="width: 375px"></el-input-number>
        </el-form-item>
        <el-form-item label="单次AGV备料运输量:" prop="agvTransVolume">
          <el-input :disabled="!onedata?.otheroperate" placeholder="请输入单次AGV备料运输量"
                    v-model.number="form.agvTransVolume"
                    autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="备料提前时间（分）:" prop="preparationLeadTime">
          <el-input :disabled="!onedata?.otheroperate" placeholder="请输入备料提前时间（分）"
                    v-model.number="form.preparationLeadTime"
                    @keyup.native="keyUp"></el-input>
        </el-form-item>
        <el-form-item label="起点站点:" prop="startStationId">
          <el-select v-model="form.startStationId" :disabled="!onedata?.otheroperate" filterable
                     placeholder="请选择起点站点" clearable
                     style="width: 240px">
            <el-option
              v-for="item in startdata" :key="item.value" :label="item.agvCode+'('+item.siteName+')'" :value="item.id"/>
          </el-select>
        </el-form-item>
        <el-form-item label="终点站点:" prop="endStationId">
          <el-select v-model="form.endStationId" :disabled="!onedata?.otheroperate" filterable
                     placeholder="请选择终点站点" clearable style="width: 240px">
            <el-option v-for="item in positiontype" :key="item.value" :label="item.label" :value="item.value"/>
          </el-select>
        </el-form-item>
        <el-form-item label="备注:" prop="mark">
          <el-col :span="10" class="dialog-list-width">
            <el-input :disabled="!onedata?.otheroperate" type="textarea" :rows="3" v-model="form.mark"
                      placeholder="请输入备注"/>
          </el-col>
        </el-form-item>
      </el-form>
      <div class="forbid" v-if="!onedata?.otheroperate || !onedata?.imagecodeused">
        当前图号，有进行中或待配送的任务，无法修改
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button class="function-two" @click="cancel">取 消</el-button>
        <el-button :disabled="!onedata?.otheroperate && !onedata?.imagecodeused" class="function-two" type="primary"
                   @click="submitForm">确定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import _ from "lodash";
import {listData} from "@/api/system/dict/data";
import {getPreparationStartStation, getone, updatePreparation} from "@/api/BasicConfiguration/preparation"

export default {
  name: "MaterialPreparation",
  components: {},
  props: {
    formData: {
      type: Object,
      default: null,
    },
    title: {
      type: String,
      default: '',
    }
  },
  data() {
    var validatePass = (rule, value, callback) => {
      if (value && value < 0 && Number.isInteger(value) || (value && value !== "" && typeof value !== 'number')) {
        callback(new Error("备料提前时间（分）必须为数值类型且不能为负数"));
      } else {
        callback();
      }
    };
    var validatePassAgv = (rule, value, callback) => {
      if (!value || value <= 0 || !Number.isInteger(value)) {
        callback(new Error("单次AGV下线运输量必须为正整数"));
      } else {
        callback();
      }
    };
    return {
      titlecopy: null,
      show: false,
      value: "",
      // 回显数据
      onedata: null,
      // 站点数据
      position: 1,
      //起点站点
      starStation: {
        iseb: 1,
      },
      startdata: null,
      form: {},
      rules: {
        imageCode: [{required: true, message: "请输入图号", trigger: "blur"}],
        plName: [{required: true, message: "请输入产线", trigger: "blur"}],
        workingHour: [
          {
            required: true,
            message: "请选择单根工时（分）",
            trigger: "blur",
          },
        ],
        agvTransVolume: [
          {required: true, message: '单次AGV备料运输量不能为空'},
          {type: 'number', message: '单次AGV备料运输量必须为数字值'},
          {
            validator: validatePassAgv,
            trigger: "blur",
          }
        ],
        preparationLeadTime: [
          {
            validator: validatePass,
            trigger: "blur",
          },
        ],
        startStationId: [
          {required: true, message: "请选择起点站点", trigger: "change"},
        ],
        endStationId: [
          {required: true, message: "请选择终点站点", trigger: "change"},
        ],
      },
      // 任务的状态
      positiontype: [],
    };
  },
  methods: {
    async open() {
      await this.getonedata();
      //初始化库位类型list
      this.getTypeList();
      this.getStarStation();
      this.titlecopy = this.$props.title;
      this.form = this.$props.formData;
    },
    getonedata() {
      getone(this.$props.formData.id).then(res => {
        this.onedata = res.data;
      })
    },
    /** 获取起点站点 */
    getStarStation() {
      getPreparationStartStation(this.starStation).then((response) => {
        this.startdata = response.data;
      });
    },
    // 初始化库位类型list
    getTypeList() {
      const data = {
        dictType: "position_type",
      };
      // 调用根据数据字典类型查询居委类型列表
      return listData(data)
        .then((res) => {
          if (res.data && res.data.list) {
            this.positiontype = res.data.list;
          }
        })
        .catch(() => {
        });
    },
    //单根工时（分）
    handleChange(value) {
      // 小数点后一位
      this.form.workingHour = value.toFixed(3);
    },
    // 取消按钮
    cancel() {
      this.show = false;
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          const params = _.cloneDeep(this.form);
          params.workingHour = this.form.workingHour;
          //编辑
          if (params.id !== undefined) {
            updatePreparation(params)
              .then(() => {
                this.form.preparationLeadTime = parseInt(params.preparationLeadTime);
                this.form.startStationId = parseInt(params.startStationId);
                this.$modal.msgSuccess("修改成功");
                this.show = false;
                this.$emit('refresh');
              })
              .catch(() => {
              });
          }
        }
      });
    },
  },
};
</script>
<style scoped>
.active {
  margin-bottom: 0;
}

.forbid {
  color: #999999;
  font-size: 12px;
  line-height: 1;
  margin: 5px 0 5px 190px;
}

.searchcopy {
  background-color: #fff;
  padding: 0 20px;
  padding-top: 17px;
  border-radius: 4px;
  display: inline-block;
}

.search > * {
  padding: 0;
  margin-right: 30px !important;
}

.dialog-list-width {
  width: 155px;
}

.el-form-item--medium .el-form-item__label {
  width: 155px;
}
</style>
